<!-- 登录页 -->
<template>
  <div class="contain">
    <div class="login">
      <div class="login_title"><img src="../assets/img/logoPC.png" /></div>
      <div class="level">
        <div :class="showType == 1 ? 'level_item2':'level_item1'" @click="showType=1">手机登录</div>
        <div :class="showType == 2 ? 'level_item2':'level_item1'" @click="showType=2">微信登录</div>
      </div>
      <div class="qrCode" v-show="showType == 2">
        <img src="../assets/img/wxQrCode.jpg" />
        <div style="height: 30px;line-height: 30px; text-align: center;color: #888;font-size: 14px; margin-top: 20px;">
          请使用#微信#扫一扫
        </div>
      </div>
      <div class="loginPanel" v-show="showType == 1">
        <input type="text" v-model="userName" placeholder="手机号" class="loginItem" />
        <input type="password" v-model="passWord" placeholder="输入密码" class="loginItem" />
        <div class="loginButton" @click="login">确认登录</div>
      </div>
    </div>
    <div class="bottonIP">Copyright © 2023 智工厂企业系统 粤ICP备2023134447号</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: "",
      passWord: "",
      showType:1,
      fail: 0 //失败次数
    };
  },
  created() {
    sessionStorage.setItem("fail", this.fail); // 登录失败的积累次数
  },
  mounted() {
    // 创建回车事件监听
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    // 销毁事件 （销毁回车事件监听）
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    testLogin(){
      this.$router.push("/index");
    },
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.login(); // 定义的登录方法
      }
    },
    async login() {
      if (this.fail < 10) {
        // 错误次数小于10次时，不需要等待时间
        let { data: res } = await this.$http.get("/login", {
          params: {
            userName: this.userName,
            password: this.passWord
          }
        });
        if (res.result) {
          this.clewMsg(1,res.msg);
          this.$store.commit("changeIsPlay", true);
          sessionStorage.setItem("userName", res.userName); //缓存用户名称
          sessionStorage.setItem("userSex", res.sex);
          sessionStorage.setItem("token", res.token);
          let orgData = {
            orgId: res.orgId,
            orgName: res.orgName
          }; //当前所在组织
          sessionStorage.setItem("orgData", JSON.stringify(orgData)); //组织缓存到本地
          sessionStorage.removeItem("fail"); //清除【失败】的缓存
          this.$router.push("/index");
        } else {
          this.clewMsg(2,res.msg);
          //累计错误次数
          this.fail = sessionStorage.getItem("fail");
          this.fail++;
          sessionStorage.setItem("fail", this.fail);
        }
      }
      // 错误次数大于10次时，限制继续30秒
      else {
        this.clewMsg(2,"登录次数太多，先休息30秒再操作");
        setInterval(() => {
          sessionStorage.removeItem("fail"); //清除【失败】的缓存
        }, 10000); 
      }
    },
    resetClick() {
      this.$refs.form.resetFields();
    },
    clewMsg(type,mes){
      var theType = 'warning';
      if(type == 1)
        theType = 'success';
      else if(type == 3)
        theType = 'error';
      this.$message({
        message: mes,
        type: theType
      });
    }
  }
};
</script>
<style scoped>
.contain {
  min-width: 1300px !important;
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(../assets/img/loginBG.png);
  background-size: 100% 100%;
}

.contain img {
  width: 100%;
  height: 99.278%;
  opacity: 0.8;
}

.login {  
  position:fixed;
  width: 320px;
  height: 70%;
  top: 9.5%;
  left: 48%;
  padding: 3% 80px;
  background-color: #FFF;
  box-shadow: 1px 4px 6px 4px rgba(180,185,190,0.2);
}

.login_title {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;  
  align-items: center; 
  font-size: 45px;
  font-weight: bold;
  color: #3689F5;
  text-shadow: 1px 2px 1px #888;
}

.login_title img{
  height: 80px;
  width: auto;
  margin-right: 20px;
}

.level{
  clear: both;
  height: 80px;
  width: 70%;
  padding: 0 15%;
  margin-bottom: 20px;
  cursor: pointer;
}
.level_item1{
  float: left;
  width: 50%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #888;
}
.level_item2{
  float: left;
  width: 50%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #222;
  border-bottom: 3px solid #BBB;
}

.checkCode {
  width: 100px;
}

.qrCode{
  width: 100%;
  text-align: center;
}
.qrCode img{
  width: 260px;
  height: auto;
}

.loginPanel{
  width: 100%;
  text-align: center;
}

.loginItem{
  width: 90%;
  height: 60px;
  text-align: left;
  margin-bottom: 40px;
  background: #E8F0FE;
  height: 50px;
  line-height: 50px;
  padding: 5px 5%;
  border: none;
  color: #222;
  font-size: 16px;
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.1);
}

.loginButton{
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #03A67B;
  color: #FFF;
  font-size: 16px;
  cursor: pointer;
}

.bottonIP{
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 25px;
  line-height: 25px;
  font-size: 18;
  color: #555;
  text-align: center;
}

</style>